import React ,{useEffect,useState}from 'react'
import $axios from '../utils/axios'
import { Divider, Radio, Table,Space,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import '../page/Contract/contractStyle.less'
import Detail from '../page/Contract/detail/Detail';

interface DataType {
    key: React.Key;
    id: string;
    rname: string;
    IDCard: string;
    tel:string;
    status:string;
    tname:string;
    sname:string;
    subscribeTime:string
  }
  interface IDadvalue{
    sendData:(data:any)=>void
    isFalse:any
  }
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.id === 'Disabled User', // Column configuration not to be checked
      name: record.id,
    }),
  }
export default function TabelRecord(props:IDadvalue) {
    const {sendData,isFalse} = props
    const [SRTSBySTOSDPage,setSRTSBySTOSDPage] = useState<any>()
    const [selectionType, setSelectionType] = useState('checkbox')
    const [detailVisible,setDetailVisible] = useState(true)
    const [currentData,setCurrentData] = useState([])
    const columns: ColumnsType<DataType> = [
        {
          title: '编号',
          dataIndex: 'number',
          render: (text: string) => <a>{text}</a>,
        },
        {
          title: '签约人姓名',
          dataIndex: 'rname',
        },
        {
          title: '身份证号',
          dataIndex: 'IDCard',
        },
        {
            title: '手机号码',
            dataIndex: 'tel',
        },
        {
            title: '签约医生团队',
            dataIndex: 'tname',
        },
        {
            title: '签约服务包',
            dataIndex: 'sname',
        },
        {
            title: '签约状态',
            dataIndex: 'status',
            key: 'status',
            render:(status)=>{
              if(status==0){
                return <a style={{color:'#3dd4a7'}}>待审核</a>
              }else if(status==1){
                return <a style={{color:'#fddb78'}}>待支付</a>
              }else if(status==2){
                return <a style={{color:'#f87495'}}>已驳回</a>
              }else if(status==3){
                return <a style={{color:'#b197fc'}}>生效中</a>
              }else if(status==4){
                return <a style={{color:'#000'}}>已过期</a>
              }
            }
        },
        {
            title: '到期时间',
            dataIndex: 'subscribeTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <Space><Button onClick={()=>jumpDetail(record)}>查看详情</Button></Space>
                    <Space><Button onClick={()=>save(record)}>续约</Button></Space>
                </Space>
            ),
        },
      ];
      //获取所有签约居民信息
    let getSRTSBySTOSDPage = ()=>{
        $axios({
            url: '/api/getSRTSBySTOSDPage',
            method: 'POST',
        }).then(res => {
            console.log('签约数据', res)
            const data = res.data.filter((item:any)=>{
              if(item.status>=3) return item;
            })
            setSRTSBySTOSDPage(data)
        })
    }
    //点击查看详情
    const jumpDetail = (data:any)=>{
        setCurrentData(data)
        setDetailVisible(false)
    }
    //点击续约
    const save=(data:any)=>{
      const obj:any = {
        rname:data.rname,
        id:data.id,
        save:true
      }
      console.log(obj)
      setCurrentData(obj)
      setDetailVisible(false)
    }
    //传给父组件的值
    sendData({
      isFalse:detailVisible,
      data:currentData
    })
    useEffect(()=>{
        getSRTSBySTOSDPage()
    },[])
  return (
    <>
      <div>
        <Radio.Group
            onChange={({ target: { value } }) => {
              setSelectionType(value);
            }}
            value={selectionType}>
        </Radio.Group>
        <Divider />
        <Table rowSelection={{...rowSelection}}
            columns={columns} dataSource={SRTSBySTOSDPage} rowKey='id'/>
      </div>
    </>
  )
}
